<template>
  <el-row class="warp">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
        <el-breadcrumb-item>平台财务管理</el-breadcrumb-item>
        <el-breadcrumb-item>平台财务列表</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>

    <el-col :span="24" class="warp-main" v-loading="loading" element-loading-text="拼命加载中">
      <!--工具条-->
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
        <el-form :inline="true" :model="filters">
          <el-form-item>
            <el-input v-model="filters.txid" placeholder="交易ID" @keyup.enter.native="handleSearch"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="filters.address" placeholder="地址" @keyup.enter.native="handleSearch"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="filters.accountType" clearable placeholder="币种" style="width: 100px;">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="filters.type" clearable placeholder="类型">
              <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <div class="block">
              <el-date-picker v-model="filters.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="开始日期" default-time="00:00:00">
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="block">
              <el-date-picker v-model="filters.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="结束日期" default-time="00:00:00">
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-on:click="handleSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>

      <!--列表-->
      <el-table :data="books" highlight-current-row  show-summary :summary-method="getSummaries" @selection-change="selsChange" style="width: 100%;">
        <el-table-column type="index" width="60"></el-table-column>
        <el-table-column prop="txid" label="交易ID" width="300"></el-table-column>
        <el-table-column prop="walletId" label="钱包ID" width="100"></el-table-column>
        <el-table-column prop="toAddress" label="输入地址" width="330"></el-table-column>
        <el-table-column prop="fromAddress" label="输出地址" width="330"></el-table-column>
        <el-table-column prop="serviceCharge" label="用户扣除费用" width="150" ></el-table-column>
        <el-table-column prop="minerFee" label="矿工费" ></el-table-column>
        <el-table-column prop="reserveFree" label="源地址比特币" width="150"></el-table-column>
        <el-table-column prop="amount" label="充值金额" width="150" ></el-table-column>
        <el-table-column prop="blockTime" label="交易时间" width="150" sortable :formatter="dateFormat"></el-table-column>
        <el-table-column prop="coinType" label="币种" width="100" :filter-method="filterTag" filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.type === 'USDT' ?  'success' : 'primary' "
              disable-transitions>{{scope.row.coinType}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="txType" label="类型" width="200" sortable :formatter="formatState" >
        </el-table-column>
      </el-table>
      <!--工具条-->
      <el-col :span="24" class="toolbar">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[10, 20, 50, 100]"
                       :page-size="limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </el-col>
    </el-col>
  </el-row>
</template>
<script>
  import util from '../../common/util'
  import API from '../../api/api_finance';
  import moment from 'moment';
  export default{
    data(){
      return {
        filters: {
          txid: '',
          address: '',
          accountType: '',
          type: '',
          startTime:'',
          endTime:''
        },
        options: [{
          value: '1',
          label: 'USDT'
        }, {
          value: '2',
          label: 'BITCOIN'
        },{
          value: '3',
          label: 'ETH'
        }],
        options2: [{
          value: '1',
          label: '充值'
        }, {
          value: '2',
          label: '提币'
        }, {
          value: '3',
          label: '冷钱包->热钱包'
        }, {
          value: '4',
          label: '未知地址->冷钱包'
        }, {
          value: '5',
          label: '未知地址->冷钱包'
        }, {
          value: '6',
          label: '资金归集'
         }, {
          value: '7',
          label: '平台预设地址->冷钱包'
        }, {
          value: '8',
          label: '归集手续费'
         }
        ],
        books: [],
        total: 0,
        page: 1,
        limit: 10,
        loading: false
      }
    },
    methods: {
      handleCurrentChange(val) {
        this.page = val;
        this.search();
      },
      handleSizeChange(val) {
        this.limit = val;
        this.search();
      },
      handleSearch(){
        this.total = 0;
        this.page = 1;
        this.search();
      },
      formatState: function (row, column) {
        var date = row[column.property];
        if(date==1){
          return "用户充值"
        }else if(date==2){
          return "提币"
        }else if(date==3){
          return "冷钱包=>提币热钱包"
        }else if(date==4){
          return "未知地址=>冷钱包"
        }else if(date==5){
          return "未知地址=>提币热钱包"
        }else if(date==6){
          return "资金归集"
        }else if(date==7){
          return "平台预设地址=>冷钱包"
        }else{
          return "手续费地址收币"
        }
      },
      //时间格式化
      dateFormat:function(row, column) {
        var date = row[column.property];
        if (date == undefined) {
             return "";
        }
         return moment(date*1000).format("YYYY-MM-DD HH:mm:ss");
      },

      filterTag(value, row) {
        return row.type === value;
      },
      search(){
        let that = this;
        let params = {
          pageNum: that.page,
          pageSize: that.limit,
          txid: that.filters.txid,
          address:that.filters.address,
          accountType: that.filters.accountType,
          type: that.filters.type,
          startTime:that.filters.startTime,
          endTime:that.filters.endTime
        };
        if(that.filters.endTime < that.filters.startTime){
          that.$message.error({showClose: true, message: "结束时间不能大于开始时间", duration: 2000});
          return;
        }
        that.loading = true;
        API.findWalletFinanceList(params).then(function (result) {
          that.loading = false;
          if (result && result.list) {
            that.total = result.count;
            that.books = result.list;
          }
        }, function (err) {
          that.loading = false;
          that.$message.error({showClose: true, message: err.toString(), duration: 2000});
        }).catch(function (error) {
          that.loading = false;
          console.log(error);
          that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
        });
      },
      selsChange: function (sels) {
        this.sels = sels;
      },
      //合计
      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总计';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value)) && column.property=="amount" || column.property=="minerFee"
            ||column.property=="serviceCharge" ||column.property=="reserveFree") {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += ' ';
          } else {
            sums[index] = '';
          }
        });

        return sums;
      }
    },
    mounted() {
      this.handleSearch()
    }
  }
</script>

<style>
  .demo-table-expand label {
    font-weight: bold;
  }
</style>
